<template>
  <div class="box">
    <div class="header">
      <p class="header-name">协议的名称:{{ name }}  &nbsp;&nbsp;&nbsp; 厂商:{{ manufacturer }} 设备的名称:{{ shebeName }}</p>
      <p class="header-select">
        <el-form>
            <el-select v-model="region" placeholder="请选择方式">
              <el-option label="遥测" value="shanghai"></el-option>
              <el-option label="遥信" value="beijing"></el-option>
              <el-option label="遥控" value="beijing"></el-option>
            </el-select>
        </el-form>
      </p>
      <p> 
        <el-button type="primary" round>开始测试</el-button> 
        <el-button type="primary" round>结束测试</el-button>
        <el-button type="primary" round @click="add()">新增</el-button>
        <el-button type="primary" round>导出</el-button>
      </p>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
        <div class="inpD"><el-input v-model="inputName" placeholder="请输入名称" class="ipt1"></el-input></div>
        <div class="inpD"><el-input v-model="inputDanwei" placeholder="请输入单位" class="ipt1"></el-input></div>
        <div class="inpD"><el-input v-model="inputType" placeholder="请输入数据类型" class="ipt1"></el-input></div>
        <div class="inpD">
        <el-button type="primary" round @click="determine(inputName,inputDanwei,inputType)">确定</el-button>
        <el-button type="primary" round @click="cancellation()">取消</el-button>
        </div>
      </el-drawer>
    </div>
    <div class="footer">
      <el-table
    :data="tableData"
    height="500"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="定值名称"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="数据类型">
    </el-table-column>
    <el-table-column
      prop="tiem"
      label="时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
  </div>
  
</template>

<script>
import bus from "../components/bus"
export default {
  name: "User",
  data(){
    return{
      tableData: [{
        
      }],
      name:"110kV1120保护1",
      manufacturer:"厂商1",
      shebeName:"",
      region:"",
      drawer: false,
      inputName:"",
      inputDanwei:"",
      inputType:"",
    }
  },
  methods: {
     add(){
      this.drawer = true
    },
    handleDelete(index) {
        console.log(index);
        this.tableData.splice(index, 1);
    },
    determine(val1, val2, val3){
      const time = new Date()
      const year = time.getFullYear()
      const month = time.getMonth()+1
      const day = time.getDate()
      const time1 = year + '.' +  month + '.' +  day
      const job = {}
      job.date = val1
      job.name = val2
      job.tiem = time1
      job.address = val3
      console.log(job)
      this.tableData.push(job)
      this.drawer = false
    },
    cancellation(){
      this.drawer = false
      this.inputName = '',
      this.inputDanwei = '',
      this.inputType = ''
    }
  },
  beforeCreate() {
    bus.$on('data',(val)=>{
      this.tableData = []      
      val.forEach((item,index) => {
        this.tableData.push(val[index])
          this.tableData[index].date = val[index].name
          this.tableData[index].name = val[index].Workunit
          this.tableData[index].address = val[index].type
          this.tableData[index].tiem = val[index].tiem        
      });
    })
    bus.$on('data1',(val)=>{
      console.log(val)
      this.name = val.menuName
      this.manufacturer = val.manufacturer
      this.shebeName = val.name
    })
  },
}
</script>

<style scoped>

.header{
  height: 150px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-around;

}
.footer{
  height: 500px;
  border: 1px solid #ccc;
  margin-top: 10px;
}
.header-name{
  font-size: 14px;
  padding-top: 10px;
}
.header p{
  margin-top: 20px;
}
.inpD{
  width: 300px;
  margin: 0px auto;
}
.inpD:first-child{
  margin-top: 50px;
}
.inpD:last-child{
  margin-top: 20px;
  display: flex;
  justify-content: space-around
}
.ipt1{
  width: 100%;
  margin: 10px auto;
}
</style>
